<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'space',title = ${'探索宇宙 | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head">
    <th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '探索宇宙',
                _permalink = '/space',
                _cover = ${theme.config.other.opengraph.image},
                _excerpt = ${site.seo.description},
                _type = 'website')}"></th:block>
    <!-- 星空专用样式 -->
    <link rel="stylesheet" th:href="${assets_link + '/css/space-entrance.css' + theme_version}">
</th:block>
<th:block th:fragment="content">

    <div class="page" id="body-wrap">
        <!-- 头部导航栏 -->
        <header class="not-top-img" id="page-header">
            <nav th:replace="~{modules/nav :: nav(title = '探索宇宙')}"></nav>
        </header>
        
        <main class="layout hide-aside" id="content-inner">
            <div id="space-page">
                <!-- 星空Canvas -->
                <canvas id="galaxyCanvas"></canvas>
                
                <!-- 星空内容覆盖层 -->
                <div class="space-content">
                    <div class="space-header">
                        <h1 class="space-title">
                            <span class="title-line">探索我的</span>
                            <span class="title-line gradient-text">星际空间</span>
                        </h1>
                        <p class="space-subtitle">每个星系都承载着独特的记忆</p>
                    </div>
                    
                    <!-- 星系网格 -->
                    <div class="galaxies-grid">
                        <!-- 回忆星系 -->
                        <a href="/moments?galaxy=memory" class="galaxy-card" data-galaxy="memory">
                            <div class="galaxy-orbit">
                                <div class="orbit-ring ring-1"></div>
                                <div class="orbit-ring ring-2"></div>
                                <div class="orbit-ring ring-3"></div>
                            </div>
                            <div class="galaxy-core">
                                <div class="core-glow"></div>
                                <div class="core-center">
                                    <span class="galaxy-emoji">🌸</span>
                                </div>
                            </div>
                            <div class="galaxy-info">
                                <h3 class="galaxy-name">回忆星系</h3>
                                <p class="galaxy-desc">珍藏的美好时光</p>
                            </div>
                        </a>
                        
                        <!-- 日常星系 -->
                        <a href="/moments?galaxy=daily" class="galaxy-card" data-galaxy="daily">
                            <div class="galaxy-orbit">
                                <div class="orbit-ring ring-1"></div>
                                <div class="orbit-ring ring-2"></div>
                                <div class="orbit-ring ring-3"></div>
                            </div>
                            <div class="galaxy-core">
                                <div class="core-glow"></div>
                                <div class="core-center">
                                    <span class="galaxy-emoji">☀️</span>
                                </div>
                            </div>
                            <div class="galaxy-info">
                                <h3 class="galaxy-name">日常星系</h3>
                                <p class="galaxy-desc">生活的点点滴滴</p>
                            </div>
                        </a>
                        
                        <!-- 心情星系 -->
                        <a href="/moments?galaxy=mood" class="galaxy-card" data-galaxy="mood">
                            <div class="galaxy-orbit">
                                <div class="orbit-ring ring-1"></div>
                                <div class="orbit-ring ring-2"></div>
                                <div class="orbit-ring ring-3"></div>
                            </div>
                            <div class="galaxy-core">
                                <div class="core-glow"></div>
                                <div class="core-center">
                                    <span class="galaxy-emoji">💭</span>
                                </div>
                            </div>
                            <div class="galaxy-info">
                                <h3 class="galaxy-name">心情星系</h3>
                                <p class="galaxy-desc">情感的涟漪</p>
                            </div>
                        </a>
                        
                        <!-- 创作星系 -->
                        <a href="/moments?galaxy=creation" class="galaxy-card" data-galaxy="creation">
                            <div class="galaxy-orbit">
                                <div class="orbit-ring ring-1"></div>
                                <div class="orbit-ring ring-2"></div>
                                <div class="orbit-ring ring-3"></div>
                            </div>
                            <div class="galaxy-core">
                                <div class="core-glow"></div>
                                <div class="core-center">
                                    <span class="galaxy-emoji">✨</span>
                                </div>
                            </div>
                            <div class="galaxy-info">
                                <h3 class="galaxy-name">创作星系</h3>
                                <p class="galaxy-desc">灵感的火花</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 底部 -->
        <footer th:replace="~{modules/footer}"/>
    </div>
    
    <!-- 星空效果脚本 -->
    <script>
        // 宇宙星轨效果
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('galaxyCanvas');
            if (!canvas) return;
            
            const ctx = canvas.getContext('2d');
            let particles = [];
            let nebulae = [];
            const PARTICLE_COUNT = 500;
            const NEBULA_COUNT = 3;
            
            // 设置画布大小
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 粒子类（星星）
            class Particle {
                constructor() {
                    this.reset();
                }
                
                reset() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.z = Math.random() * canvas.width;
                    this.size = Math.random() * 2;
                    this.speed = Math.random() * 0.5 + 0.1;
                }
                
                update() {
                    this.z -= this.speed;
                    if (this.z <= 0) {
                        this.reset();
                        this.z = canvas.width;
                    }
                }
                
                draw() {
                    const x = (this.x - canvas.width / 2) * (canvas.width / this.z);
                    const y = (this.y - canvas.height / 2) * (canvas.width / this.z);
                    const s = this.size * (canvas.width / this.z);
                    
                    const px = x + canvas.width / 2;
                    const py = y + canvas.height / 2;
                    
                    if (px >= 0 && px <= canvas.width && py >= 0 && py <= canvas.height) {
                        const opacity = (1 - this.z / canvas.width) * 0.8;
                        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
                        ctx.beginPath();
                        ctx.arc(px, py, s, 0, Math.PI * 2);
                        ctx.fill();
                        
                        // 绘制星轨
                        const prevZ = this.z + this.speed * 10;
                        const prevX = (this.x - canvas.width / 2) * (canvas.width / prevZ) + canvas.width / 2;
                        const prevY = (this.y - canvas.height / 2) * (canvas.width / prevZ) + canvas.height / 2;
                        
                        ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.3})`;
                        ctx.lineWidth = s * 0.5;
                        ctx.beginPath();
                        ctx.moveTo(prevX, prevY);
                        ctx.lineTo(px, py);
                        ctx.stroke();
                    }
                }
            }
            
            // 星云类
            class Nebula {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.radius = Math.random() * 200 + 100;
                    this.color = this.getRandomColor();
                    this.rotation = Math.random() * Math.PI * 2;
                    this.rotationSpeed = (Math.random() - 0.5) * 0.001;
                }
                
                getRandomColor() {
                    const colors = [
                        { r: 186, g: 85, b: 211 },   // 紫色
                        { r: 65, g: 105, b: 225 },   // 蓝色
                        { r: 255, g: 107, b: 157 },  // 粉色
                        { r: 255, g: 165, b: 0 }     // 橙色
                    ];
                    return colors[Math.floor(Math.random() * colors.length)];
                }
                
                update() {
                    this.rotation += this.rotationSpeed;
                }
                
                draw() {
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.rotation);
                    
                    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, this.radius);
                    gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.15)`);
                    gradient.addColorStop(0.5, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0.05)`);
                    gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
                    
                    ctx.fillStyle = gradient;
                    ctx.fillRect(-this.radius, -this.radius, this.radius * 2, this.radius * 2);
                    ctx.restore();
                }
            }
            
            // 初始化
            for (let i = 0; i < PARTICLE_COUNT; i++) {
                particles.push(new Particle());
            }
            
            for (let i = 0; i < NEBULA_COUNT; i++) {
                nebulae.push(new Nebula());
            }
            
            // 动画循环
            function animate() {
                // 绘制背景
                const gradient = ctx.createRadialGradient(
                    canvas.width / 2, canvas.height / 2, 0,
                    canvas.width / 2, canvas.height / 2, canvas.width
                );
                gradient.addColorStop(0, '#0a0e27');
                gradient.addColorStop(0.5, '#1a1a3e');
                gradient.addColorStop(1, '#050510');
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 绘制星云
                nebulae.forEach(nebula => {
                    nebula.update();
                    nebula.draw();
                });
                
                // 绘制粒子（星星和星轨）
                particles.forEach(particle => {
                    particle.update();
                    particle.draw();
                });
                
                requestAnimationFrame(animate);
            }
            
            animate();
        });
    </script>

</th:block>

</html>

